<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>基本表单</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            输入框元素
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">普通输入框：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="请输入内容">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">密码输入框：</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" placeholder="请输入内容">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">文本区域：</label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control" rows="3" placeholder="请输入内容"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">圆角输入框：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control round" placeholder="请输入内容">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">输入框禁用：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " disabled placeholder="被禁用的输入框">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">输入框只读：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " readonly placeholder="设置只读的输入框">
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            单选&多选元素
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">竖向复选框：</label>
                                    <div class="col-sm-9">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" value="">选项一
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" value="">选项二
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" value="">选项三
                                            </label>
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label class="col-sm-2 control-label">横向复选框：</label>
                                    <div class="col-sm-9">
                                        <div class="checkbox-inline">
                                            <label>
                                                <input type="checkbox" value="">选项一
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label>
                                                <input type="checkbox" value="">选项二
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label>
                                                <input type="checkbox" value="">选项三
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">竖向单选框：</label>
                                    <div class="col-sm-9">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="t" value="">选项一
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="t" value="">选项二
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="t" value="">选项三
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">横向复选框：</label>
                                    <div class="col-sm-9">
                                        <div class="radio-inline">
                                            <label>
                                                <input type="radio" name="tt" value="">选项一
                                            </label>
                                        </div>
                                        <div class="radio-inline">
                                            <label>
                                                <input type="radio" name="tt" value="">选项二
                                            </label>
                                        </div>
                                        <div class="radio-inline">
                                            <label>
                                                <input type="radio" name="tt" value="">选项三
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">下拉选择-单选：</label>
                                    <div class="col-sm-9">
                                        <select class="form-control">
                                            <option>选项一</option>
                                            <option>选项二</option>
                                            <option>选项三</option>
                                            <option>选项四</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">下拉选择-多选：</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" multiple>
                                            <option>选项一</option>
                                            <option>选项二</option>
                                            <option>选项三</option>
                                            <option>选项四</option>
                                        </select>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            其他表单元素
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">帮助文本：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="请输入内容">
                                        <div class="help-block">
                                            <span>这是帮助文本展示。<code>.help-block</code></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">帮助文本：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="请输入内容">
                                        <div class="help-block">
                                            <span
                                                class="text-warning">这是帮助文本展示。文本颜色可以通过<code>.text-primary</code>等样式控制。</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">文本显示：</label>
                                    <div class="col-sm-9">
                                        <div class="form-control-static">文本文字显示<code>.form-control-static</code></div>
                                    </div>
                                </div>


                                <div class="form-group has-success">
                                    <label class="col-sm-2 control-label">成功状态：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="请输入内容">
                                        <span class="help-block">成功状态显示颜色<code>.has-success</code></span>
                                    </div>
                                </div>
                                <div class="form-group has-error">
                                    <label class="col-sm-2 control-label">错误状态：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="请输入内容">
                                        <span class="help-block">错误状态显示颜色<code>.has-error</code></span>
                                    </div>
                                </div>
                                <div class="form-group has-warning">
                                    <label class="col-sm-2 control-label">警示状态：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="请输入内容">
                                        <span class="help-block">警示状态显示颜色<code>.has-warning</code></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">输入框尺寸：</label>
                                    <div class="col-sm-9">
                                        <p>
                                            <input type="text" class="form-control input-lg"
                                                placeholder="大尺寸输入框.input-lg">
                                        </p>
                                        <p>
                                            <input type="text" class="form-control" placeholder="正常尺寸输入框">
                                        </p>
                                        <p>
                                            <input type="text" class="form-control input-sm"
                                                placeholder="小尺寸输入框.input-sm">
                                        </p>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">元素布局：</label>
                                    <div class="col-sm-9">
                                        <div class="row">
                                            <div class="col-md-1">
                                                <input type="text" class="form-control" placeholder="col-md-1">
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" class="form-control" placeholder="col-md-2">
                                            </div>
                                            <div class="col-md-3">
                                                <input type="text" class="form-control" placeholder="col-md-3">
                                            </div>
                                            <div class="col-md-4">
                                                <input type="text" class="form-control" placeholder="col-md-4">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>